@import "custom";
@import "../bootstrap/scss/bootstrap";

* {
    box-sizing: border-box;
}

ul{
    list-style: none;
    padding: 0;
}

img{
    max-width: 100%;
}

body {
    margin: 0;
}

.navbar{

    padding-top: 0;
    padding-bottom: 0;

    &-brand{
        padding: 0;

        img{
            height: 100%;
            max-height: 6.5rem;

            @media (max-width: $screen-xl-max ) {
                height: 4.625rem;
            }
        }
    }

}

.navbar-nav{
    position: relative;
    z-index: 99;
    @media (min-width: $screen-xl-min ) {
        height: 6.75rem;
    }


    .nav-item{
        position: relative;

        @media (min-width: $screen-xl-min ) {
            width: 6.5rem;
            text-align: center;
        }

        &:hover{
            .subnav{
                visibility: visible;
                opacity: 1;
            }
        }


        &:last-child{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            transition: transform .5s ease-out;
            background-color: #e9e9ea;
            border-bottom: .25rem solid #21549f;

            @media (min-width: $screen-xl-min ) {
                display: list-item;
                height: 100%;
            }
        }
    }

    .nav-link{

        display: flex;
        align-items: center;

        position: relative;
        z-index: 1;
        color: #333 !important;

        @media (min-width: $screen-xl-min ) {
            height: 100%;
            justify-content: center;
        }

    }


}

.subnav{
    position: absolute;
    top: calc(100% + 1.25rem);
    right: 0;
    color: #ffffff;
    background-color: #151965;
    width: 12.1875rem;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: all .1s linear;

    &:before{
        content: '';
        display: block;
        width: 6.5rem;
        position: absolute;
        right: 0;
        bottom: 100%;
        height: 1.25rem;
        background-color: #151965;
    }

    &__item{

        & + &{
            border-top: 1px solid #6172b1;
        }

        &:hover,
        &.active{
            background-color: #4fc0ff;
            //background-clip: content-box;
        }
    }

    &__link{
        display: block;
        height: 4.375rem;
        line-height: 4.375rem;
        color: #ffffff;
        padding-left: 2.375rem;
    }
}

@include nav-item-ah;



/*首页轮播*/
.swiper-button-prev, .swiper-button-next{
    outline: none;
}

.index-swiper{


    .swiper-pagination{
        line-height: 1;
        font-size: 0;
        bottom: 1.0625rem !important;
    }

    .swiper-pagination-bullet{
        @include area(0.5rem);
        border-radius: 0;
        opacity: 1;
        background-color: transparent;
        border: 0.0625rem solid #fff;
    }

    .swiper-pagination-bullet-active{
        background-color: #ffffff;
    }

    .swiper-button-prev, .swiper-button-next{
        @include area(2.1875rem, 3.375rem);

        &:after{
            display: none;
        }
    }

    .swiper-button-prev{
        left: 0;
        background: url("../images/swiper-prev.png") center/contain no-repeat;
    }
    .swiper-button-next{
        right: 0;
        background: url("../images/swiper-next.png") center/contain no-repeat;
    }
}
/*首页轮播 结束*/

.index{
    &-title{
        width: max-content;
        margin: 0 auto 0;
        line-height: 1;
        border-top: .3125rem solid #999999;
        border-bottom: .3125rem solid #999999;
    }

    &-news{

        &__item{
            color: #333333;
            margin-bottom: 4.0625rem;
            display: block;
        }

        &__title{
            font-size: 1.25rem;
            margin-bottom: 0.375rem;
        }

        &__time{
            font-size: .75rem;
            display: block;
            height: 0.75rem;
            margin-bottom: 0.5625rem;
        }

        &__summary{
            font-size: 0.875rem;

        }

        &__btn{
            width: 4.1875rem;
            @include lhh(2.125rem);
            background-color: #468dc8;
            color: #ffffff;
            display: block;
            text-align: center;
            margin-left: auto;
            margin-top: -2.3125rem;
        }
    }

    /*首页产业格局*/
    &-industry{
        color: #ffffff;


        .max-461{
            max-width: 28.8125rem;
        }

        .max-633{
            max-width: 39.5625rem;
        }



        &__bg1{
            background: url("../images/industries-1.png") center/cover no-repeat;
        }
        &__bg2{
            background: url("../images/industries-2.png") center/cover no-repeat;
        }
        &__bg3{
            background: url("../images/industries-3.png") center/cover no-repeat;
        }

        &__bg4{
            background: #8c7a71 center/cover no-repeat;
        }

        &__bg5{
            background: #9d9d9d center/cover no-repeat;
        }

        &__bg6{
            background: #212230 center/cover no-repeat;
        }
    }
    /*首页产业格局 结束*/


    &-apply{
        margin: 77px 0 192px;

        .swiper-container{
            max-width: 50.625rem;
        }

        .swiper-button-prev, .swiper-button-next{
            @include area(2.1875rem, 3.375rem);

            &:after{
                display: none;
            }
        }

        .swiper-button-prev{
            left: 0;
            background: url("../images/swiper-prev.png") center/contain no-repeat;
        }
        .swiper-button-next{
            right: 0;
            background: url("../images/swiper-next.png") center/contain no-repeat;
        }
    }
}

.top-0{
    top: 0;
}

.left-0{
    left: 0;
}

.right-0{
    right: 0;
}

.second {
    background: #F1F4FA;

    &-article{
        background: #ffffff;
        margin: 2.375rem 0 0;
    }

    &-title {
        font-size: 2.25rem;
        color: #333333;
        line-height: 1;

        &:after {
            content: "";
            display: block;
            width: 4.9375rem;
            height: 0.25rem;
            background-color: #2c5da4;
            margin: 1.125rem auto 0;
        }
    }

    &-subtitle {
        font-size: 1.2369rem;
        color: #666666;
        line-height: 1;
        margin: 0;
        text-transform: uppercase;
    }
}



// 404页面
.fnf {
    background: #f1f4fa;
    min-height: 667px;
    height: 100vh;

    @media (max-width: 575px) {
        height: 100vh;
    }

    &__pic {
        max-width: 69.375rem * .625;
    }

    &__btn {
        &-group{
            max-width: 23.4375rem;
            width: 100%;
            margin: 0 auto;
        }

        display: inline-block;
        background-image: linear-gradient(90deg, #f4a223 0%, #ff6000 100%),
            linear-gradient(#f5a623, #f5a623);
        color: #fff;
    }

    &__text{
        margin-top: 20.5625rem * .4;
    }
}



// 侧边栏
.sidebar{
    background: #ffffff;

    &__item{
        line-height: 3.875rem;
        padding: 0 1.5rem;
        display: block;
        font-size: 1.1875rem;
        color: #333333;

        @include ellipsis;

        &:hover,
        &--active{
            background: #e9e9ea;
        }
    }

    &__heading{
        text-align: center;
        min-height: 8.625rem;
        background-color: #2759a2;
        color: #ffffff;

        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    &__title{
        font-size: 1.5625rem;
    }

    &__subtitle{
        font-size: 0.9375rem;
    }
}

//面包屑导航
.breadcrumb{
    background: none;
    border-radius: 0;
    border-bottom: 1px dashed #666666;

    &-item{
        a{
            color: #333333;
        }

        &.active{
            color: #ff0000;
        }

        & + &:before{
            content: '>';
        }
    }
}

// 文章页
.detail{
    @extend .second-article;
    padding: els(3.5rem, 3.625rem, 1.25rem) 0 3.5625rem;

    &__title{
        font-size: 1.25rem;
        line-height: 3.625rem;
        margin-bottom: els(1.1875rem, 3.625rem, 1.25rem);
    }

    &__source{
        line-height: 1;
        margin-bottom: 2.625rem;
        color: #999999;
    }

    &__date{
        line-height: 1;
        margin-top: 2.625rem;
        color: #999999;
    }
}

.ti2em{
    text-indent: 2em;
}

// 产业格局
.industry{

    &-heading{
        padding-bottom: 0;

        &--border{
            border-bottom: 2px solid #cccccc;

            .industry-heading__title{
                border-bottom: 2px solid #e60000;
                margin: 0 0 -2px;
            }
        }

        &__subtitle{
            color: rgba(#999999, .4);
            height: 0.8125rem;
            margin: 0 0 0.3125rem;
            line-height: 1;
        }

        &__title{
            line-height: 1;
            color: #e60000;
            padding: 0 0 0.5625rem;
            width: max-content;
            margin: 0 0;
        }
    }

    &-desc{
        font-size: 0.875rem;
        line-height: 1.5625rem;
    }

    &-col{
        height: 17.5625rem;
        background: #4c9fef;
    }

    &-collapse{

        &__btn{
            text-decoration: none;
            color: #5e91de;

            &:hover{
                color: #5e91de;
            }

            &:focus{
                box-shadow: none;
            }

            &.collapsed{
                .industry-collapse__arrow{
                    transform: rotate(-180deg);
                }
            }
        }


    }

    &-card{
        &__text{
            font-size: 0.875rem;
            line-height: 1.5625rem;

            text-align: justify;
        }
    }
}

// 应用展示
.use{
    @extend .second-article;
    padding: 1.6875rem 0 1.8125rem;

    &__title{
        font-size: 1.1875rem;
        line-height: 1;
        margin-bottom: 4.1875rem;
    }

    &-item{
        display: block;
        min-height: 19.375rem;
        padding-bottom: els(0.9375rem,1.5rem,.875rem);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
        margin-bottom: 2.25rem;

        &__pic{
            padding-bottom: 70%;
            @include bg-c-c;
            margin-bottom: els(0.75rem,1.5rem,1rem);
        }

        &__title{
            font-size: 1rem;
            color: #000000;
            line-height: 1.5rem;
            margin-bottom: ls(1.5rem, 1.5rem, 1rem, 1.5rem, .875rem);
        }

        &__summary{
            color: #000000;
            line-height: 1.5rem;
            font-size: 0.875rem;
            margin-bottom: 0;
            text-align: justify;
        }
    }

    &__desc{
        font-size: 1rem;
        color: #333333;
        margin-bottom: 10rem;
    }


    &-swiper{

        &__title{
            line-height: 1;
            font-size: 1.1875rem;
            margin-bottom: 2.3125rem;
        }

        &__url{
            font-size: 0.875rem;
        }

        .swiper-slide {
            background-size: cover;
            background-position: center;

            img{
                width: 100%;
            }
        }
        .gallery-top {
            width: 100%;
        }
        .gallery-thumbs {
            box-sizing: border-box;
            padding: 1.5625rem 0;
            .swiper-slide {
                width: 8.875rem;
                opacity: 0.4;
            }
            .swiper-slide-thumb-active {
                opacity: 1;
            }
        }
    }

    &-slide{
        &__pic{
            padding-bottom: 54%;
            background: center/cover no-repeat;
            margin-bottom: els(0.6875rem, 1.5rem, 0.875rem);
        }

        &__title{
            font-size: 0.875rem;
            line-height: 1.5rem;
        }
    }
}

// 联系方式
.contact{

    &__map{
        height: 18.5rem;
    }

    .panel{
        margin-bottom: 3.125rem;
    }

    .panel-heading{
        position: relative;
        background: transparent;
        padding-left: 0;
        display: inline-block;
        padding-right: 2rem;
        padding-bottom: 1.375rem;
        padding-top: 0;
        min-width: 18.5625rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid #ddd;
    }

    .panel-title{
        font-size: 1.375rem;
        color: #333;
        display: inline;
        margin-right: 1.125rem;
    }

    .panel-body{
        font-size: 1rem;
        line-height: 2.25rem;
        color: #666;
        padding: 0;
        p{
            margin: 0;
        }
    }
}

.news{

    &-color{
        color: #21539e;
    }

    &-border-bottom{
        border-bottom: 0.25rem solid #2c5da4;
    }

    &-item{

        &__pic{
            padding-top: 65%;
            @include bg-c-c;
            background: #999999;
        }

        &__time{
            color: #999999;
        }

        &__summary{
            color: #666666;
            height: 1rem * 1.5 * 4;
            overflow: hidden;
        }
    }
}

.footer{
    background: #333333;
    color: #ffffff;
}

